<template>
    <view :class="'l-message l-class ' + ('l-message-' + typeClone) + ' ' + (status ? 'l-message-show' : '')" :style="'z-index:' + zIndex + ';top:' + topClone + 'rpx'">
        <block v-if="status">
            <view style="margin-right: 15rpx">
                <l-icon :name="iconClone ? iconClone : typeClone" :size="iconSize" :color="typeClone === 'warning' ? '#333' : iconColor" />
            </view>
            <image v-if="imageClone" :src="imageClone" class="l-message-image l-class-image" />
            {{ content }}
            <slot />
        </block>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import zIndex from '../behaviors/zIndex';
import watchShow from '../behaviors/watchShow';
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            status: false,
            zIndex: '',
            typeClone: '',
            topClone: '',
            iconClone: false,
            imageClone: ''
        };
    },
    mixins: [zIndex, watchShow, validator],
    externalClasses: ['l-class', 'l-image-class'],
    props: {
        show: Boolean,
        icon: String,
        iconColor: {
            type: String,
            default: '#fff'
        },
        iconSize: {
            type: String,
            default: '28'
        },
        image: String,
        content: String,
        type: {
            type: String,
            default: 'primary',
            options: ['primary', 'warning', 'success', 'error']
        },
        duration: {
            type: Number,
            default: 1500
        },
        openApi: {
            type: Boolean,
            default: true
        },
        top: {
            type: Number,
            default: 0
        }
    },
    watch: {
        icon: function () {}
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this.initMessage();
        },

        initMessage() {
            uni.lin = uni.lin || {};
            uni.lin.showMessage = (t = {}) => {
                const { content: e = '', icon: i = '', image: a = '', type: s = 'primary', duration: o = 1500, success: n = null, top: r = 0 } = t;
                this.success = n;
                this.setData({
                    contentClone: e,
                    iconClone: i,
                    imageClone: a,
                    durationClone: o,
                    typeClone: s,
                    topClone: r
                });
                this.changeStatus();
                return this;
            };
            uni.lin.hideMessage = () => {
                this.setData({
                    status: false
                });
            };
        }
    },
    created: function () {}
};
</script>
<style>
.l-message {
    width: 750rpx;
    height: 72rpx;
    border-radius: 0rpx 0rpx 16rpx 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 50%;
    font-size: 28rpx;
    color: #fff;
    opacity: 0;
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(217, 212, 191, 0.5);
    transform: translateX(-50%) translateZ(0) translateY(-100%);
    transition: all 0.4s ease-in-out;
}
.l-message-success {
    background-color: #34bfa3;
}
.l-message-error {
    background-color: #f4516c;
}
.l-message-warning {
    background-color: #ffe57f;
    color: #333;
}
.l-message-primary {
    background-color: #3963bc;
}
.l-message-show {
    transform: translateX(-50%) translateZ(0) translateY(0);
    opacity: 1;
}
.l-message-image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 15rpx;
}
</style>
